<template>
	<view >
		<HearderSearch></HearderSearch>
		<view class="Box">
			<scroll-view class="leftBox" scroll-y="true" >
				<view @click="click_cate_1(item.children, index)" :class="{current_li: active_index === index}" class="list_item" :key="item.cat_id" v-for="(item, index) in categor_List">{{item.cat_name}}</view>
			</scroll-view>
			<scroll-view ref="cate_2_father" class="rightBox" scroll-y="true" >
				<view class="cate_2" v-for="(item, index) in current_2_list" :key="item.cat_id">
					<view class="title">/{{item.cat_name}}/</view>
					<view class="cate_3">
						<view class="cate_3_item" @click="go_goods_list_onFun(item_3.cat_id)" v-for="(item_3, index_3) in item.children" :key="item_3.cat_id">
							<image :src="item_3.cat_icon" mode=""></image>
							<text>{{item_3.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import HearderSearch from '../../components/HearderSearch/HearderSearch.vue'
	import tabbar_tip_number from '../../mixins/tabbar_tip_number.js'
	export default {
		mixins: [tabbar_tip_number],
		data() {
			return {
				categor_List: [],
				active_index: 0,
				current_2_list: []
			};
		},
		onLoad() {
			this.get_categor_List();
		},
		methods: {
			async get_categor_List() {
				const {data:res} = await uni.$http.get('/api/public/v1/categories');
				this.categor_List = res.message;
				this.current_2_list = res.message[0].children;
				// this.get_tops_myFun()
			},	
			async get_itemInfo_data() {
				const {data:res} = await uni.$http.get('/api/public/v1/categories');
				this.categor_List = res.message;
			},
			// get_tops_myFun() {
			// 	this.$nextTick(function(){
			// 		const arr = [];
			// 	})
			// }
			click_cate_1(cate_2_data, index) {
				this.active_index = index;
				this.current_2_list = cate_2_data;
			},
			// 去商品列表
			go_goods_list_onFun(id) {
				uni.navigateTo({
					url: '../../subPageA/goods_list/goods_list?cid=' + id
				})
			}
		},
		components: {
			HearderSearch
		}
	}
</script>

<style lang="scss">
	.Box {
		display: flex;
		align-items: stretch;
		position: fixed;
		top: 130rpx;
		bottom: 0;
		width: 100%;
		.leftBox {
			width: 20%;
			.list_item {
				height: 130rpx;
				width: 100%;
				line-height: 130rpx;
				text-align: center;
			}
			.current_li {
				position: relative;
				&::before {
					content: '';
					display: block;
					width: 6rpx;
					height: 70%;
					margin-left: 4rpx;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					background-color: red;
				}
			}
		}
		.rightBox {
			width: 80%;
			.cate_2 {
				margin-bottom: 110rpx;
				.title {
					text-align: center;
				}
				.cate_3 {
					display: flex;
					flex-wrap: wrap;
					.cate_3_item {
						width: 33.33%;
						height: 250rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						image {
							width: 80%;
							height: 200rpx;
						}
					}
				}
			}
		}
	}

</style>
